
<div class="d-flex justify-content-between align-items-center mb-3">

  <!-- Dialog title -->
  <h3 mat-dialog-title class="mb-0">List of catalogs</h3>

  <div class="searchbox">
    <app-filter (filterList)="filterList($event)">
    </app-filter>
  </div>

</div>

<!-- Dialog content -->
<div mat-dialog-content>
  <div class="table-responsive" *ngIf="data.list">

    <!-- Table containing list of existing datalogs in specified database -->
    <table
      mat-table
      [dataSource]="data.list"
      class="w-100 borderless hoverable">

      <!-- Name Column -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>Name</th>
        <td mat-cell *matCellDef="let element">{{element?.name}}</td>
      </ng-container>

      <!-- Tables Column -->
      <ng-container matColumnDef="tables">
        <th mat-header-cell *matHeaderCellDef class="text-nowrap">Tables</th>
        <td mat-cell *matCellDef="let element">{{element?.tables?.length ?? 0}}</td>
      </ng-container>

      <!-- Action Column -->
      <ng-container matColumnDef="action">
        <th mat-header-cell *matHeaderCellDef>Actions</th>
        <td mat-cell *matCellDef="let element">

          <button
            mat-button
            color="primary"
            routerLink="/sql-studio"
            [queryParams]="{dbType: data.item.dbTypeValue, dbName: element.name, dbCString: data.item.cStringKey}"
            mat-dialog-close>
            Edit
          </button>

          <button
            mat-button
            color="warn"
            class="ms-3"
            (click)="deleteCatalog(element)">
            Delete
          </button>

          <button
            mat-button
            color="primary"
            class="ms-3"
            routerLink="/endpoint-generator"
            [queryParams]="{dbType: data.item.dbTypeValue, dbName: element.name, dbCString: data.item.cStringKey}"
            mat-dialog-close>
            Generate endpoints
          </button>

        </td>
      </ng-container>

      <tr
        mat-header-row
        *matHeaderRowDef="displayedColumns;sticky: true"></tr>

      <tr
        mat-row
        *matRowDef="let row; columns: displayedColumns;"
        [class.d-none]="filter && row.name.indexOf(filter) === -1"></tr>
    </table>

  </div>
</div>

<div mat-dialog-actions [align]="'end'">

  <button
    mat-flat-button
    mat-dialog-close
    color="primary">
    Close
  </button>

</div>
